/*
 * 所有的卡片内容样式都在这里
 *
 * 卡片的通用样式在`mixins.styl`里
 */

// 卡片容器
.card-container {
  margin: 0 auto
}

// 文章列表卡片样式
.card-container.card-articles {
  .article-title {
    font-weight: 700
    line-height: 1.3
    margin-bottom: 20px
  }

  .article-meta {
    line-height: 1.3
  }
  
  .article-category {
    position: absolute
    z-index: 2

    .article-category-link {
      border-radius: 20px
      padding: 4px 8px
      transition: all 0.2s ease

      &:hover {
        color: #000000
        background-color: #ffffff
      }
    }
  }
}

// 文章导航器样式
.card-container.card-article-nav {
  article {
    display: flex
    flex-direction: column
    align-items: center
    justify-content: center
  }

  strong {
    margin-bottom: 20px
  }
}

@media mq-pc {
  .card-container.card-articles {
    .article-title {
      font-size: font-desktop-focus
    }
    .article-meta {
      margin-bottom: 60px
    }
    .article-category {
      bottom: 45px
      left: 30px // 38 - 8
    }
  }
  
  .card-container.card-article-nav {
    font-size: font-desktop-commonly
  }

  // 文章卡片
  .card-container.card-articles {
    card-list(content-margin, 40px 38px 45px, 350px, 370px, 24px, 3)
  }

  // 文章导航卡片
  .card-container.card-article-nav {
    card-list(content-margin, 20px 38px 20px, auto, 110px, 24px, 2)
  }
}

@media mq-mb {
  .card-container.card-articles {
    .article-title {
      font-size: font-mobile-focus
    }
    .article-meta {
      margin-bottom: 40px
    }
    .article-category {
      bottom: 40px
      left: 22px // 30 - 8
    }
  }

  .card-container.card-article-nav {
    font-size: font-mobile-commonly
  }
  
  // 文章卡片
  .card-container.card-articles {
    card-list(content-margin-min, 30px 30px 40px, 70vw, 200px, 24px, 1)
  }

  // 文章导航卡片
  .card-container.card-article-nav {
    card-list(content-margin-min, 18px 20px 18px, auto, 90px, 12px, 1)
  }
}
